<template>
	<view>
		<view class="contextual-menu" :class="`mask-${mask ? 'show' : 'hidden'}`" @longpress="longpress">
			<slot></slot>
		</view>
		<view :class="'contextual-menu-mask contextual-menu-mask-' + ( mask ? 'show' : 'hidden')" @click="close">
			<view class="menu" :style="{ ...layout }">
				<view v-for="(item, index) in itemList" :key="'contextual-menu-item-'+index" class="menu-item"
					hover-class="menu-item-hover" @click.stop="click(index,item)" :style="{ color: itemColor }">
					{{ item.op }}
				</view>
			</view>
		</view>
		<!-- <template id="contextual-menu-mask">
			
		</template> -->
	</view>
</template>

<script>
	// 动态创建组件 https://blog.csdn.net/qq_40755381/article/details/113530935
	// import Vue from 'vue/dist/vue.esm.js';
	// import {
	// 	EventBus
	// } from "@/utils/event-bus.js";
	// import Vue from 'vue';

	// const MenuMask = {
	// 	// template: "#contextual-menu-mask",
	// 	template: ``,
	// 	props: ['mask', 'layout', 'itemList', 'itemColor'],
	// 	methods: {
	// 		close() {
	// 			this.$emit('close');
	// 		},
	// 		click(index) {
	// 			this.$emit('click', index);
	// 		},
	// 	}
	// };
	export default {
		emits: ["item-click", "close"],
		props: {
			itemList: {
				type: Array,
				default: [],
			},
			itemColor: {
				type: String,
				default: "var(--contextual-menu-color)",
			},
		},
		data() {
			return {
				mask: false,
				window: {
					width: 0,
					height: 0,
				},
				layout: {},
			};
		},
		created() {
			this.init();
		},
		methods: {
			init() {
				uni.getSystemInfo({
					success: (res) => {
						this.window = {
							width: res.windowWidth,
							height: res.windowHeight,
						};
					},
					fail: () => {
						this.init();
					},
				});
			},
			longpress(e) {
				// console.log(e);
				const query = uni.createSelectorQuery().in(this);
				query
					.select(".contextual-menu")
					.boundingClientRect((data) => {
						const {
							width,
							height
						} = this.window;
						let {
							top,
							left
						} = data;
						const layout = {
							width: 'auto',
							transition: "all 0.3s cubic-bezier(.34,1.26,.64,1) 0.3s",
						};
						const defaultPx = 20;
						if (left < width / 2) {
							layout.left = `${defaultPx}px`;
							layout.transform = "scale(1)";
							layout.transformOrigin = "50% 0%";
						} else {
							layout.right = `${defaultPx}px`;
							layout.transformOrigin = "100% 0%";
							layout.transform = "scale(1)";
						}
						const targetMiddle = left + data.width / 2;
						if (targetMiddle > width / 2 - 20 && targetMiddle < width / 2 + 20) {
							// 中间
							layout.left = "50%";
							layout.transform = "translateX(-50%) scale(1)";
							layout.transformOrigin = "50% 50%";
						}
						if (top > height / 2) {
							let bottom = height - (data.top + data.height) + defaultPx;
							layout.bottom = `${bottom < defaultPx ? defaultPx : bottom}px`;
						} else {
							let top2 = data.top + data.height * 0.7;
							layout.top = `${top < defaultPx ? defaultPx : top2}px`;
						}
						this.layout = layout;
						this.mask = true;

						// 动态创建mask
						// const mskCmp = new(Vue.extend(MenuMask))({
						// 	propsData: {
						// 		'mask': this.mask,
						// 		'layout': this.layout,
						// 		'itemList': this.itemList,
						// 		'itemColor': this.itemColor,
						// 	},
						// }).$mount("#mask");
						// // 直接这样监听自定义事件
						// mskCmp.$once('close', this.close);
						// mskCmp.$once('click', this.click);
						// this.$forceUpdate();
						// console.log(mskCmp);

						// EventBus.$emit("changeMask", mskCmp);
						// document.getElementById('mask').appendChild(mskCmp.$el);

						uni.vibrateShort();
					})
					.exec();
			},
			close() {
				this.mask = false;
				this.layout = {};
				this.$emit("close");
			},
			click(index, item) {
				this.$emit("item-click", index, item, () => {
					this.mask = false;
				});
			},
		},
	};
</script>

<style lang="scss">
	@media (prefers-color-scheme: light) {
		.contextual-menu-mask {
			--contextual-blur: 16px;
			--contextual-menu-bg: rgba(255, 255, 255, 0.6);
			--contextual-menu-border: rgba(0, 0, 0, 0.1);
			--contextual-menu-color: #000;
		}
	}

	@media (prefers-color-scheme: dark) {
		.contextual-menu-mask {
			--contextual-blur: 16px;
			--contextual-menu-bg: rgba(12, 12, 12, 0.6);
			--contextual-menu-border: rgba(255, 255, 255, 0.1);
			--contextual-menu-color: #fff;
		}
	}

	.contextual-menu {
		width: 100%;
		position: relative;
		overflow: hidden;
	}

	.contextual-menu-hover {
		transform: scale(1);
		transform-origin: 50% 50%;
	}

	.contextual-menu-mask {
		position: fixed;
		width: 100%;
		height: 100%;
		z-index: 999;
		top: 0;
		left: 0;
		transition: all 0.3s;

		.menu {
			position: absolute;
			height: auto;
			width: 0px;
			border-radius: 10px;
			overflow: hidden;
			background-color: var(--contextual-menu-bg);
			transform: scale(0);
			display: flex;
			flex-direction: column;
		}

		.menu-item {
			min-width: 170px;
			height: 38px;
			line-height: 38px;
			font-size: 14px;
			padding: 0 12px;
			box-sizing: border-box;
			border-bottom: 1px solid var(--contextual-menu-border);
			white-space: nowrap;
			text-align: left;
		}

		.menu-item:last-child {
			border-bottom: none;
		}

		.menu-item-hover {
			background-color: var(--contextual-menu-border);
			transition: all 0s;
		}
	}

	.contextual-menu-mask-hidden {
		opacity: 0;
		pointer-events: none;
	}

	.contextual-menu-mask-show {
		opacity: 1;
		pointer-events: auto;
		backdrop-filter: blur(var(--contextual-blur));
	}
</style>